*{
    margin: 0;
    padding: 0;
}
.bg{
    width: 100%;
    height: 13.34rem;
    overflow: hidden;
    background-size: 100% 100%;
}
.exponent-index{
    background: #f8780f url('../img/index-bg.jpg') no-repeat scroll center 0 / cover;
}
.hand-bg {
    width: 3.42rem;
    height: 3.52rem;
    background: url('../img/sz-bg.png') no-repeat scroll center 0 / cover;
    background-size: cover;
    margin: auto;
    margin-top: .3rem;
    position: relative;
}
.index-banner{
    width: 100%;
    height: 3.75rem;
    overflow: hidden;
}
.index-banner img{
    width: 100%;
    height: 100%;
}
.handIndex {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}
.handIndex img{
    width: 100%;
    height: 100%;
}
.mask{
    position: absolute;
    z-index: 2;
    width: 3.26rem;
    left: 50%;
    margin-left: -1.63rem;
    height: 100%;
}
.mask div{
    width: 3.26rem;
    height: .86rem;
    overflow: hidden;
    position: absolute;
}
.mask img{
    width: 100%;
    height: 100%;
    position: absolute;
}
.mask > .mask-one{
    top: .08rem;
}
.mask > .mask-two{
    top: .92rem;
}
.mask > .mask-three{
    top: 1.74rem;
}
.mask > .mask-four{
    top: 2.58rem;
}

.guess-int{
    width: 3.25rem;
    height: .72rem;
    line-height: .72rem;
    box-sizing: border-box;
    padding-left: .2rem;
    background: #fff;
    border-radius: .4rem;
    margin: auto;
    margin-top: .5rem;
}
#guessInt{
    width: 94%;
    height: .6rem;
    font-size: .25rem;
    float: left;
    margin-top: .09rem;
    outline: none;
    border: none;
}

.guess-btn{
    width: 3.75rem;
    height: 1.44rem;
    margin: auto;
}
.guess-btn img{
    width: 100%;
    height: 100%;
}
.degree{
    text-align: center;
    width: 100%;
    margin-top: .4rem;
    font-size: .3rem;
    color: #fff;
}
.degree span{
    color: #fff001;
    font-size: .4rem;
    margin: 0 .1rem;
}
.index-footer{
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: .5rem;
}
.index-footer > div{
    box-sizing: border-box;
    padding: 0 .5rem;
    font-size: .3rem;
}
.index-footer > div a{
    list-style-type: none;
    text-decoration: none;
    color: black;
}
.footer-left {
    border-right:1px solid black;
}
.judge{
    width: 100%;
    text-align: center;
    overflow: hidden;
    height: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.judge span{
    margin: .03rem 0;
    font-size: .3rem;
    color: red;
}
.shade {
    background: url('../img/shade.png') no-repeat scroll center 0 / cover;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-size: cover;
    z-index: 1000;
    opacity: 0.7;
}
.popup{
    position: absolute;
    background: url('../img/popup.png') no-repeat scroll center 0 / cover;
    width: 5.73rem;
    height: 7.24rem;
    z-index: 1001;
    top: 2.3rem;
    left: 50%;
    margin-left: -2.85rem;
}

.popup-text{
    width: 100%;
    text-align: center;
    font-size: .4rem;
    color: #f9fe6c;
    margin-top: .7rem;
}
.popBox{
    width: 3.33rem;
    height: 3.33rem;
    border: 2px solid #fa953b;
    margin: auto;
    margin-top: .5rem;
    border-radius: .3rem;
    overflow: hidden;
}
.handBox{
    width: 100%;
    height: 2.6rem;
    text-align: center;
}

.pop-bottom{
    width: 2rem;
    height: .7rem;
    background: #d94134;
    font-size: .3rem;
    text-align: center;
    line-height: .7rem;
    float: right;
    color: #fff;
    
}

.guess{
    text-align: center
}
#gueBtn{
    width: 3.6rem;
    height: .9rem;
    background: #ffc80b;
    border-radius: .5rem;
    font-size: .4rem;
    color: #c30c11;
    outline: none;
    border: none;
}

.correctText{
    width: 100%;
    text-align: center;
    font-size: .6rem;
    color: #fdff6f;
    margin-top: .7rem;
}
.correct-two-text{
    width: 100%;
    text-align: center;
    font-size: .35rem;
    color: #c5002a;
    margin-bottom: .6rem;
}

.correct-btn{
    width: 100%;
    height: .9rem;
    display: flex;
    align-content: center;
    justify-content: center;
    margin-bottom: .36rem;
    overflow: hidden;
}
.correct-btn button{
    width: 3.65rem;
    height: .9rem;
    border-radius: .6rem;
    font-size: .4rem;
    color: #fff;
    outline: none;
    border: none;
}
.yellow{
    background: #ffc80b;
}
.blue{
    background: #1fbbce;
}
.purple{
    background: #c438ff;
}
.close{
    position: absolute;
    top: 9.7rem;
    z-index: 10001;
    left: 50%;
    margin-left: -.325rem;
}
.prize{
    width: 2.6rem;
    height: 2.5rem;
    background: #fff;
    margin: auto;
    display: flex;
    align-content: center;
    justify-content: center;
}
.prizeBtn{
    width: 100%;
    text-align: center;
}
#prizeBtn{
    width: 3.6rem;
    height: .95rem;
    background: #ffc80b;
    border-radius: .6rem;
    font-size: .4rem;
    color: #c71b0f;
    outline: none;
    border: none;
}
.pophei{
    height: 8rem;
}
.popClose{
    top: 10rem;
}
.addressBox{
    font-size: .2rem;
    width: 100%;
    text-align: center;
    color: #93060e;
    margin-top: .4rem;
}

.valid{
    width: 100%;
    text-align: center;
    font-size: .2rem;
    color: #fff;
    margin-top: .1rem;
}
.handBox img{
    width: 2.6rem;
    height: 2.6rem;
}







